<template>
  <div class="detailBox">
    <div class="detailCon">
      <div class="basicBox" v-show="!fullLoading">
        <div class="top">
          <div class="tit">
            <b>
              {{ dataItem.appNo }}
            </b>
          </div>
          <div class="row">{{ dataItem.empNatureLabel }}</div>
        </div>
        <div class="middle">
          <p>
            <label>申请编号</label>
            <span>{{ dataItem.appNo }}</span>
          </p>
          <p>
            <label>申请人</label>
            <span>{{ dataItem.applnt }}</span>
          </p>
          <p>
            <label>申请部门</label>
            <span>{{ dataItem.appDeptPathname }}</span>
          </p>
          <p>
            <label>申请人电话</label>
            <span>{{ $infoHiding.handlePhone(dataItem.applntPhone) }}</span>
          </p>
          <p>
            <label>申请原因</label>
            <span>{{ dataItem.appReason }}</span>
          </p>
        </div>
        <div class="bottom">
          <p>
            <label>申请时间</label>
            <span>{{ dataItem.appTime }}</span>
          </p>
        </div>
      </div>
      <div class="followerBox">
        <h5 @click="isFold = !isFold">
          <b>办公用品列表（{{ dataList.length }}）</b>
          <p v-if="isFold">展开 <van-icon name="arrow-down" /></p>
          <p v-else>折叠 <van-icon name="arrow-up" /></p>
        </h5>
        <div v-show="!isFold" class="list">
          <div v-for="(val, ind) in dataList" :key="ind" class="list-item">
            <div class="right">
              <div style="display: flex;justify-content: space-between;">
                <div>
                  <van-image class="photo" width="70" height="70" :src="val.photoUrl" />
                  <div class="con">
                    <p>
                      <span class="label">申领用品：</span>
                      {{ val.prodName || "-" }}| {{ val.model }}
                    </p>
                    <p>
                      <span class="label">单价：</span>
                      ￥***/{{ val.unitName }}
                    </p>
                    <p>
                      <span class="label">申领数量：</span>
                      {{ val.appAmount - val.notReceiveAmount }}/{{ val.appAmount }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-empty v-if="!dataList.length" class="custom-image" :image="require('../../../../assets/images/empty.png')"
            description="暂无办公用品信息" />
        </div>
      </div>
    </div>
    <full-loading v-if="fullLoading"></full-loading>
  </div>
</template>

<script>
import { queryFileInfo } from '@/api/common';
export default {
  data() {
    return {
      fullLoading: false,
      isFold: true,
      dataItem: [],
      dataList: [],
    };
  },
  methods: {
    // 获取详情数据
    getData(arr = []) {
      this.dataItem = arr;
    },
    // 获取核酸检测数据
    getTestData(data) {
      data.map(item => {
        this.$set(item, 'checked', false)
        if (item.fileCode) {
          queryFileInfo({ fileCode: item.fileCode }).then(res => {
            if (res.code == 1000) {
              let src = res.data.url;
              this.$set(item, 'photoUrl', src);
            }
          })
        }
      })
      this.dataList = data;
    },
    // 文字内容换行转换
    showHTML(text) {
      return text
        ? text.toString().replace(new RegExp("\r\n|\n", "g"), "<br />")
        : "";
    },
  },
};
</script>

<style scoped lang="less">
.detailBox {
  background: rgb(238, 238, 238);
  height: 100%;
  overflow: auto;
}

.detailCon {
  padding: 12px;
  box-sizing: border-box;
}

.basicBox {
  padding: 30px 10px 10px;
  box-sizing: border-box;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  margin: 1px 0 8px 0;
  position: relative;

  .top {
    border-bottom: 1px dashed #aaa;
    padding: 0 5px 10px;
    margin-bottom: 12px;
    position: relative;
    line-height: 22px;

    .tit {
      b {
        font-size: 16px;

        span {
          font-size: 14px;
        }
      }

      .type {
        background: #f2a84e;
        font-size: 9px;
        color: #fff;
        margin-left: 8px;
        padding: 2px 3px;
        border-radius: 3px;
      }
    }

    .row {
      color: #999;
      font-size: 13px;
    }

    .status {
      position: absolute;
      top: 0;
      right: 0;

      span {
        color: #bbb;
        font-size: 13px;
      }

      img {
        width: 35px;
        height: 35px;
        margin-right: 10px;
      }
    }
  }

  .middle {
    padding: 0 5px 10px;
    box-sizing: border-box;
    border-bottom: 1px dashed #aaa;
  }

  p {
    display: flex;
    line-height: 28px;

    label {
      width: 105px;
      color: #999;
    }

    span {
      color: #333;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .bottom {
    padding: 0 5px;
    box-sizing: border-box;
    margin-top: 10px;

    p span,
    p label {
      color: #999;
    }
  }

  .imgBox {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 2px;
    box-sizing: border-box;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}

h5 {
  border-bottom: 1px solid #f1f1f2;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  font-weight: normal;
  position: relative;

  b {
    font-size: 14px;
  }

  p {
    font-weight: normal;
    position: absolute;
    color: #888;
    right: 15px;
  }
}

.followerBox {
  background: #fff;
  border-radius: 8px;
  margin-top: 12px;

  /deep/.van-empty {
    padding: 20px 0;

    .van-empty__image {
      width: 50px;
      height: 50px;
    }
  }

  .list-item {
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;

    img {
      width: 60px;
      height: 60px;
      margin-right: 10px;
    }

    .right {
      flex: 1;
      overflow: hidden;
      border-bottom: 1px solid #f1f1f2;

      .photo {
        float: left;
      }

      .con {
        margin-left: 10px;
        float: right;
        padding-left: 1px;

        p {
          line-height: 20px;
          font-size: 12px;
          flex: 1;
        }
      }

      // div {
      //   display: flex;
      //   line-height: 28px;

      //   label {
      //     width: 120px;
      //     color: #999;
      //     padding: 0px 35px 0px 5px;
      //   }

      //   p {
      //     color: #333;
      //     flex: 1;
      //     overflow: hidden;
      //     text-overflow: ellipsis;
      //     white-space: nowrap;
      //   }
      // }
    }
  }
}
</style>
